<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
							<label class="col-form-label">名称:</label>
							<div class="col-lg-2">
								<input type="text" class="form-control" v-model="searchForm.title" placeholder="请输入">
							</div>
							<label class="col-form-label">路由id:</label>
							<div class="col-lg-2">
								<input type="text" class="form-control" v-model="searchForm.route_id" placeholder="请输入">
							</div>
							<label class="col-form-label">类型:</label>
							<div class="col-lg-2">
								<select class="form-control" v-model="searchForm.type">
									<option value="">请选择</option>
									<option value="0">站内</option>
									<option value="1">站外</option>
									<option value="2">未知</option>
								</select>
							</div>
							<label class="col-form-label">所属模块:</label>
							<div class="col-lg-2">
                                <el-select v-model="searchForm.modules_id" placeholder="请选择">
                                    <el-option
                                    v-for="item in dynamicRouteModulesList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
							</div>
						</div>
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">断言:</label>
							<div class="col-lg-2">
								<input type="text" class="form-control" v-model="searchForm.route_predicates" placeholder="请输入">
							</div>
							<label class="col-form-label">过滤器:</label>
							<div class="col-lg-2">
								<input type="text" class="form-control" v-model="searchForm.route_filters" placeholder="请输入">
							</div>
							<label class="col-form-label">状态:</label>
							<div class="col-lg-2">
								<select class="form-control" v-model="searchForm.status">
									<option value="">请选择</option>
									<option value="0">启用</option>
									<option value="1">关闭</option>
								</select>
							</div>
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                                @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2"
                                @click="resetAll()"> <span><span>清空条件</span></span></b-button>
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">
                                    <button class="btn btn-light-success font-weight-bold mr-2 " @click="addDynamicRoute">
                                        <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                                    </button>

                                    <button class="btn btn-light-primary font-weight-bold mr-2" @click="updateDynamicRoute"
                                        :disabled="this.sels.length != 1">
                                        <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                                    </button>
                                    <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                                    <button class="btn btn-light-danger font-weight-bold mr-2" @click="delDynamicRoute"
                                        :disabled="this.sels.length === 0">
                                        <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                                    </button>
                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="title" show-overflow-tooltip label="名称"  width="140">
                    <template slot-scope="scope">
                        <b-link class="btn btn-link" @click="getDetail(scope.row)">{{ scope.row.title }}</b-link>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="route_id" show-overflow-tooltip label="路由id"></el-table-column>
                <el-table-column align="left" prop="route_order" show-overflow-tooltip label="转发顺序"></el-table-column>
                <el-table-column align="left" prop="status" show-overflow-tooltip label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <b-badge class="mr-1" variant="primary">发布</b-badge>
                        </div>
                        <div v-else-if="scope.row.status == 1">
                            <b-badge class="mr-1" variant="danger">关闭</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="info">缺省</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="type" show-overflow-tooltip label="类型">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 0">
                            <b-badge class="mr-1" variant="primary">站内</b-badge>
                        </div>
                        <div v-else-if="scope.row.type == 1">
                            <b-badge class="mr-1" variant="success">站外</b-badge>
                        </div>
                        <div v-else-if="scope.row.type == 2">
                            <b-badge class="mr-1" variant="danger">未知</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="info">缺省</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="modules_id" show-overflow-tooltip label="所属模块" min-width="150"></el-table-column>
                <el-table-column align="center" prop="createBy"  label="创建人" min-width="150"></el-table-column>
                <el-table-column align="center" prop="create_time"  label="创建时间" min-width="180"></el-table-column>
                <el-table-column align="center" prop="modifiedBy"  label="修改人" min-width="150"></el-table-column>
                <el-table-column align="center" prop="update_time"  label="修改时间" min-width="180"></el-table-column>
                <el-table-column align="center" label="操作" fixed="left" min-width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <b-form-checkbox 
                                v-model="scope.row.newStatus"
                                value=true
                                unchecked-value=false
                                switch
                                size="lg"
                                variant="outline-secondary"
                                @change=updateStatus(1,scope.row)>
                            </b-form-checkbox>
                        </div>
                        <div v-if="scope.row.status == 1">
                            <b-form-checkbox 
                                v-model="scope.row.newStatus"
                                value=true
                                unchecked-value=false
                                switch
                                size="lg"
                                variant="outline-secondary"
                                @change=updateStatus(0,scope.row)>
                            </b-form-checkbox>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <DynamicRouteAdd ref="DynamicRouteAddRef" @change="search"></DynamicRouteAdd><!--采用父窗口关闭传递的方法-->
        <DynamicRouteUpdate ref="DynamicRouteUpdateRef" @change="search"></DynamicRouteUpdate><!--采用父窗口关闭传递的方法-->
        <DynamicRouteDetail ref="DynamicRouteDetailRef"></DynamicRouteDetail>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import DynamicRouteAdd from "@/view/omp/route/dynamic-route/dynamic-route-add.vue";
import DynamicRouteUpdate from "@/view/omp/route/dynamic-route/dynamic-route-update.vue";
import DynamicRouteDetail from "@/view/omp/route/dynamic-route/dynamic-route-detail.vue";

import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { title: "" ,route_id:"",type:"",modules_id:"",route_predicates:"",route_filters:"",status:""},
            dataList: [],
            dynamicRouteModulesList:null,
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    components: {
        DynamicRouteAdd,
        DynamicRouteUpdate,
        DynamicRouteDetail,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "路由信息" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
        this.initDynamicRouteModulesList();
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_OMP_API + "/dynamicRoute/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
                this.initDynamicRouteModule();
            });
        },

        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.id));
        },
        addDynamicRoute() {//新建
            this.$refs.DynamicRouteAddRef.showModal()
        },
        updateDynamicRoute() {// 更新
            if (this.sels.length != 1) {
                handleAlert("请选择一条数据", "warning", 3)
                return;
            }
            let id = this.sels.map((item) => item.id);
            this.$refs.DynamicRouteUpdateRef.showModal(id);
        },
        delDynamicRoute() { // 删除
            if (this.sels.length === 0) {
                handleAlert("请选择删除的数据", "warning", 3)
                return;
            }
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
                let ids = this.sels.map((item) => item.id);
                apiUtil.delete(process.env.VUE_APP_OMP_API + "/dynamicRoute/delete?id=" + ids.join(",")).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        },
        updateStatus(status,row){
            let params = {id:row.id,status:status};
            apiUtil.update(process.env.VUE_APP_OMP_API + "/dynamicRoute/updateStatus",params).then(data => {
                if (data.data.success) {
                    handleAlert("更新成功", "success", 3);
                    this.search();
                } else {
                    handleAlert("更新失败", "error", 3);
                }
            });
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        getDetail(row) {
            this.$refs.DynamicRouteDetailRef.showModal(row.id);
        },
        initDynamicRouteModule(){
            this.dataList.forEach(item => {
                if(null != item.modules_id && "" != item.modules_id){
                    apiUtil.get(process.env.VUE_APP_OMP_API+"/dynamicRouteModules/get/"+item.modules_id).then(data=>{     
                        item.modules_id = data.data.data.name;
                    });
                }else{
                    item.modules_id = "∨";
                }
                if(item.status == 0){                    
                    item.newStatus = true;
                }else {
                    item.newStatus = false;
                }
            })
        },
        initDynamicRouteModulesList(){
            let params = {};
            apiUtil.query(process.env.VUE_APP_OMP_API+"/dynamicRouteModules/listAll", params).then(({ data }) => {
                this.dynamicRouteModulesList = data.data;
            });
        },

    }
};
</script>